<!--
 * 组件注释
 * @Author: wuq-l
 * @Date: 2022-08-18 21:07:25
 * @LastEditors: machinist_wq
 * @LastEditTime: 2023-01-30 20:47:22
 * @Description: 
 * 人生无常！大肠包小肠......
-->
<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
      <Hha :msg="msg"></Hha>
      <span @click="store.increment()">这是大香蕉{{store.counter}}</span>
      <br />
      <span @click="permiStore1.GenerateRoutes()">1这是大香蕉{{permiStore1.counter}}</span>
      <br />
      <span>这是大香蕉2{{store.doubleCount}}</span>
      <el-button @click="logOut">退出</el-button>
      <nav>
        <RouterLink to="/">Home</RouterLink>
        <!-- <RouterLink to="/" v-hasPermi="['bcemis:grade:setReportDate']">Home</RouterLink> -->
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>
  <RouterView />
</template>
<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from '@/components/HelloWorld.vue'
import Hha from '@/components/Hha.vue'
import { ref } from 'vue'
import { counter, permiStore, userStore } from '@/stores'
//@ts-ignore
import { getSystem } from '@/api/home'

const store = counter()
const UseStore = userStore()
const permiStore1 = permiStore()

const msg = ref(1112)
let data = {
  pageNum: 1,
  pageSize: 5,
}
getSystem(data).then((res: any) => {
  console.log(res)
})
const logOut = () => {
  console.log('退出')
  UseStore.FedLogOut()
}
console.log(import.meta.env)
</script>

<style scoped lang="scss">
header {
  line-height: 1.5;
  max-height: 100vh;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;
  margin-top: 2rem;
  a.router-link-exact-active {
    color: var(--color-text);
  }
  a.router-link-exact-active:hover {
    background-color: transparent;
  }
  a {
    display: inline-block;
    padding: 0 1rem;
    border-left: 1px solid var(--color-border);
  }
  a:first-of-type {
    border: 0;
  }
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }

  nav {
    text-align: left;
    margin-left: -1rem;
    font-size: 1rem;

    padding: 1rem 0;
    margin-top: 1rem;
  }
}
</style>
